<template>
  <div class="muzi muzi-form">
    <el-form :model="form" :rules="rules" ref="FormHandle" v-loading="loading" label-width="100px">
      <muzi-divide name="项目信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="名称" prop="name" required>
            <el-input v-model="form.name" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="type" required>
            <el-select v-model="form.type" placeholder="项目类型">
              <el-option v-for="item in options.type" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址" prop="address" required>
            <el-input v-model="form.address" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目经理" prop="manager" required>
            <el-input v-model="form.manager" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="甲方" prop="owner" required>
            <el-input v-model="form.owner" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="contact" required>
            <el-input v-model="form.contact" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile" required>
            <el-input v-model="form.mobile" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现场单位" prop="clienteleId" required>
            <el-select v-model="form.clienteleId" placeholder="现场负责单位" @change="onClientele">
              <el-option v-for="item in options.clienteleList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="operating" :gutter="5">
      <el-col :offset="20" :span="4">
        <el-button type="primary" :loading="saving" size="large" @click="onSubmit()">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { type } from '@/data/project'

export default {
  data() {
    return {
      id: null,
      saving: false,
      loading: false,
      form: {},
      rules: {},
      options: {
        type,
        clienteleList: [],
      },
    }
  },
  mounted() {
    // 初始化客户列表
    this.$API.clientele.list.get().then(res => {
      if (res.success) this.options.clienteleList = res.data;
    });

    const { serial } = this.$route.query; // 实际传值为id
    if (serial) {
      this.$API.project.detail.get(serial).then(res => {
        if (res.success) {
          this.form = res.data;
        }
      })
    }
  },
  methods: {
    onSubmit() {
      this.$refs.FormHandle.validate(async (valid) => {
        if (valid) {
          this.saving = true;
          let res = await this.$API.project.create.post(this.form);
          this.saving = false;
          if (res.success) {
            this.$message.success("保存成功")
            this.$router.push({name: "project", replace: true})
          } else {
            this.$alert(res.message, "提示", {type: 'error'})
          }
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.muzi {
  width: 75vw;
  height: 100%;
  margin: 45px auto;

  .operating {
    .el-button--large {
      width: 100%;
    }
  }
}
</style>
